<template>
	<div>

		<div style="margin-top: -20px;margin-bottom: 5px;">
			<el-input v-model="ClientName" style="width: 150px;" placeholder="角色名称"></el-input>
			<el-button type="primary" style="margin-left: 5px;" @click="onSubmit()">查询</el-button>

			<el-button @click="ShowAdd">添加</el-button>
		</div>

		<el-table :data="tableData" border style="width: 100%">
			<el-table-column type="selection" width="55" />
			<el-table-column fixed prop="Id" label="Id" width="50" />
			<el-table-column prop="ClientName" label="客户名称" width="120" />
			<el-table-column prop="Address" label="地址" width="150" />
			<el-table-column prop="Phone" label="电话" width="120" />
			<el-table-column prop="CreateTime" label="时间" width="140" />
			<el-table-column prop="Contact" label="联系人" width="150" />
			<el-table-column prop="LoginPwd" label="密码" width="180" />
			<el-table-column prop="Status" label="状态" width="90">
				<template #default="scoped">
					{{ IsStatus(scoped.row.Status) }}
				</template>
			</el-table-column>

			<el-table-column fixed="right" label="操作" min-width="120">
				<template #default="scope">

					<el-button link type="primary" size="small" @click="ShowEdit(scope.row.Id)">编辑</el-button>
					<el-button link type="primary" size="small" @click="Delete(scope.row.Id)">删除</el-button>

				</template>
			</el-table-column>
		</el-table>

		<div class="demo-pagination-block">
			<el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
				:size="size" :disabled="disabled" :background="background"
				layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</div>

		<el-dialog v-model="dialogAddVisible" title="添加" width="600" draggable>
			<ClientAdd @cloesdrawer="closeAdd" v-if="dialogAddVisible"></ClientAdd>
		</el-dialog>
		<el-dialog v-model="dialogUpdateVisible" title="修改" width="600" draggable>
			<ClientUpdate :Id="Id" @onSave="closeUpdate" v-if="dialogUpdateVisible"></ClientUpdate>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import type { ElTable } from 'element-plus'
	import clientapi from '@/api/clientapi';
	import ClientAdd from '../Client/ClientAdd.vue'
	import ClientUpdate from './ClientUpdate.vue'
	import { ref, onMounted } from "vue"


	import { ElMessageBox, ElNotification } from 'element-plus'

	const Id = ref(0);

	const ClientName = ref("")
	const tableData = ref([])
	const total = ref(0);
	const pageSize = ref(5);
	const pageIndex = ref(1);

	const size = ref<ElTable>('default')
	const background = ref(false)
	const disabled = ref(false)

	const dialogAddVisible = ref(false);
	const dialogUpdateVisible = ref(false);
	const dialogDetailVisible = ref(false);
	const authVisible = ref(false);
	const getdata = (ClientName : string = "", PageSize : number = 5, PageIndex : number = 1) => {
		var query = {
			ClientName: ClientName,
			PageSize: PageSize,
			PageIndex: PageIndex
		}
		clientapi.query(query).then(res => {
			console.log("roledata=", res.data);
			tableData.value = res.data
			total.value = res.total;
		}).catch(err => {
			console.log("err=>", err);
		})
	}

	onMounted(() => {
		getdata(ClientName.value, pageSize.value, pageIndex.value);
	})

	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
		pageSize.value = val;
		pageIndex.value = 1;
		getdata(ClientName.value, pageSize.value, pageIndex.value);
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
		pageIndex.value = val;
		getdata(ClientName.value, pageSize.value, pageIndex.value);
	}

	const onSubmit = () => {
		getdata(ClientName.value)
	}

	//显示添加
	const ShowAdd = () => {
		dialogAddVisible.value = !dialogAddVisible.value
	}

	const closeAdd = (flag : boolean) => {
		//关闭弹窗
		dialogAddVisible.value = !dialogAddVisible.value
		//刷新数据
		pageIndex.value = 1;
		getdata(ClientName.value, pageSize.value, pageIndex.value);
	}
	const ShowDetail = (Id : number) => {
		console.log("Id=", Id);
	}
	const ShowEdit = (id : number) => {
		console.log("Id=", id);
		Id.value = id;
		dialogUpdateVisible.value = !dialogUpdateVisible.value
	}
	const closeauth = (flag : boolean) => {
		//关闭弹窗
		authVisible.value = !authVisible.value
		//刷新数据
		pageIndex.value = 1;
		getdata(ClientName.value, pageSize.value, pageIndex.value);
	}
	const closeUpdate = (flag : boolean) => {
		//关闭弹窗
		dialogUpdateVisible.value = !dialogUpdateVisible.value
		//刷新数据
		pageIndex.value = 1;
		getdata(ClientName.value, pageSize.value, pageIndex.value);
	}



	/**
	 * 判断状态
	 * @param status 
	 */
	const IsStatus = ((status : any) => {
		let statustext = "正常"
		switch (status) {
			case 0:
				statustext = "删除"
				break;
			case -1:
				statustext = "禁用"
				break;
		}
		return statustext
	})

	const Delete = (Id : number) => {
		console.log("Id=", Id);
		ElMessageBox.confirm("确认删除吗？").then(() => {
			//
			clientapi.del({ id: Id }).then(res => {
				console.log("res=>", res)
				if (res.code == 1) {
					ElNotification({
						title: 'Success',
						message: '删除成功',
						type: 'success',
						duration: 800,
						onClose: () => {
							//emit("onSave", true)
							getdata(ClientName.value, pageSize.value, pageIndex.value);
						}
					})
				} else {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'Error',
						duration: 800,
					})
				}
			}).catch(err => {

			})
		}).catch(() => {

		})
	}
</script>

<style>
</style>